<template>
    <div class="a-box">
      <div class="hea-deta">
        <img @click="back3()" :src="'./static/lyl/back.png'" alt="">
        <ul>
          <li v-for="(item,index) in data" :key="index">
            <router-link :to="item.path">
              {{item.txt}}<p v-if="$route.params.id==index"></p>
            </router-link>
          </li>
        </ul>
        <img @click="isbare()" :src="'./static/lyl/san.png'" alt="">
      </div>

      <router-view></router-view>

      <van-popup v-model="show" position="bottom">
        <div class="fotsss" v-for="(item,index) in imgData" :key="index">
          <img :src="item" alt="">
          <p>分享到微信</p>
        </div>
      </van-popup>
    </div>
</template>

<script>
    export default {
      name: "Activedetail",
      data(){
        return {
          show:false,
          imgData:['./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg','./static/lyl/timg.jpg'],
          data:[
            {path:'/active2/0/'+this.$route.params.id2,txt:'活动'},
            {path:'/photo/1/'+this.$route.params.id2,txt:'相册'},
            {path:'/video/2/'+this.$route.params.id2,txt:'视频'},
            {path:'/dynamic/3/'+this.$route.params.id2,txt:'动态'},
            {path:'/vote/4/showout/0/'+this.$route.params.id2,txt:'投票'},
            {path:'/recommend/5/'+this.$route.params.id2,txt:'推荐'}
            ]
        }
      },
      methods:{
        back3(){
          this.$router.push('/active');
          //history.go(-1)
        },
        isbare(){
          this.show = !this.show;
        }
      }
    }
</script>

<style scoped>
  .a-box{
    padding: 80px 0 100px;
  }
 .hea-deta{
   position: fixed;
   left: 0;
   top: 0;
   background: #fff;
   z-index: 99;
   box-sizing: border-box;
   width: 100%;
   height: 80px;
   border-bottom: 1px solid #dcdcdc;
   padding: 20px 40px;
   display: flex;
   justify-content: space-between;
 }
 .hea-deta img:nth-child(1){
   width: 20px;
   align-self: center;
 }
 .hea-deta ul{
   display: flex;
   justify-content: space-between;
 }
 .hea-deta ul li{
   position: relative;
   width: 80px;
   font-size: 26px;
   border-right: 1px solid #444;
   text-align: center;
 }
 .hea-deta ul li p{
   position: absolute;
   left: 50%;
   margin-left: -30px;
   bottom: -20px;
   width: 60px;
   border: 1px solid #e98345;
 }
 .hea-deta ul li:last-child{
   border: none;
 }
 .hea-deta img:nth-child(3){
   width: 56px;
   align-self: center;
 }
 .van-popup{
   width: 100%;
   height: 200px;
   padding: 50px 0;
   display: flex;
   justify-content: space-around;
 }
 .van-popup img{
   width: 100px;
   height: 100px;
 }
  .fotsss{
    text-align: center;
  }
 .fotsss p{
   font-size: 26px;
   padding-top: 10px;
 }
</style>
